<script setup lang="ts">
import PlayListHeader from '@/components/playlist/PlayListHeader.vue'
import PlayListTab from '@/components/playlist/PlayListTab.vue'
import {onBeforeMount, onUpdated , ref } from "vue"
import { useRouter, useRoute } from  'vue-router'

import { usePlayListStore } from '@/stores'
import { handleWheel } from '@/composables/useWheelEvent'

const listStore = usePlayListStore()

const router = useRouter()
const route = useRoute()

const loading = ref(true)

onBeforeMount(async ()=>{
  if(route.params.id)
  {
    listStore.listId = parseInt(route.params.id as string)
    listStore.playListName = route.params.name as string
    await listStore.getPlayListInfo(listStore.listId)
    loading.value = false
  }
  else {
    console.log("no id")
    router.replace("/")
  }

})

onUpdated(()=>{
  if(route.params.id)
  {
    listStore.listId = parseInt(route.params.id as string)
    listStore.playListName = route.params.name as string
  }
  else {
    console.log("no id")
    router.replace("/")
  }

})


</script>

<template>
  <div class="wrapper" @wheel.prevent="handleWheel($event,50)">
    <PlayListHeader :title="listStore.playListName" :songs="listStore.list" :logo="listStore.playListImg" ></PlayListHeader>
    <PlayListTab :songs="listStore.list" v-loading="loading"></PlayListTab>
  </div>

</template>

<style lang="scss" scoped>
.wrapper{
  position: relative;
}
</style>